<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> jQuery动画</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	</head>
	<body>
		<p id="p1" > 隐藏动画 </p>
		<button id="btn1" style="opacity: 1;" > 隐藏/显示 </button>
		
		<p id="p2" > 滑动动画 </p>
		<button id="btn2" > 滑动 </button>
		
		<div id="a1" style="width: 100px;position: relative; height: 100px; background-color: aqua;" >
			jqyerdong
			</div>
		<button id="btn3" > 动画 </button>
	</body>
	<script>
		$('#btn1').click(function(){
			// 隐/显动画切换
			$('#p1').fadeToggle()
			//修改透明度动画
			$('#p1').fadeTo(1000,0.1)
		})
		
		$("#p1").click(function(){
		  // 渐隐动画(时长,动效,回调函数)
		  // $(this).fadeOut(1000,'linear', function(){
				// $(this).fadeIn(500)
		  // });
		  
		  $(this).fadeToggle()
		  
		  
		});
		
		
		$('#btn2').click(function(){
			$('#p2').slideUp()
		})
		
		
		$('#btn3').click(function(){
			// 定时器停止
			// setTimeout(function(){
			// 	$('#a1').stop(true,false)
			// },500)
			
			$('#a1').animate({
				left:'200px',
				width: "+=50px",
				},1000,'swing',function(){
					console.log('回调，执行完成的代码')
			}).animate({
				fontSize:'+=10px',
				left:'+=200px',
			},1000,'swing',function(){
				console.log('回调2，执行完成的代码')
			})
			
			
		})
	</script>
</html>